{% extends 'stocks/base.html' %}

{% block title %}首页 - 股票数据展示系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h4><i class="bi bi-house"></i> 欢迎使用股票数据展示系统</h4>
            </div>
            <div class="card-body">
                <p class="lead">这是一个基于Django的股票数据展示系统，数据来源于MCP stock_db数据库。</p>
                
                <div class="row text-center mb-4">
                    <div class="col-md-4">
                        <div class="card bg-primary text-white">
                            <div class="card-body">
                                <h5><i class="bi bi-database"></i> 股票总数</h5>
                                <h3>{{ total_stocks }}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card bg-success text-white">
                            <div class="card-body">
                                <h5><i class="bi bi-graph-up"></i> 日交易数据</h5>
                                <h3>实时更新</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card bg-info text-white">
                            <div class="card-body">
                                <h5><i class="bi bi-cash-coin"></i> 财务指标</h5>
                                <h3>全面分析</h3>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-grid gap-2 d-md-flex justify-content-md-start">
                    <a href="{% url 'stock_list' %}" class="btn btn-primary me-md-2">
                        <i class="bi bi-list"></i> 查看所有股票
                    </a>
                    <a href="#recent-stocks" class="btn btn-outline-secondary">
                        <i class="bi bi-clock-history"></i> 最近股票
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5><i class="bi bi-info-circle"></i> 系统功能</h5>
            </div>
            <div class="card-body">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                        <i class="bi bi-search text-primary"></i> 股票搜索功能
                    </li>
                    <li class="list-group-item">
                        <i class="bi bi-table text-success"></i> 详细公司信息
                    </li>
                    <li class="list-group-item">
                        <i class="bi bi-bar-chart text-info"></i> 日交易数据展示
                    </li>
                    <li class="list-group-item">
                        <i class="bi bi-calculator text-warning"></i> 财务指标分析
                    </li>
                    <li class="list-group-item">
                        <i class="bi bi-download text-danger"></i> 实时数据更新
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4" id="recent-stocks">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5><i class="bi bi-clock-history"></i> 最近股票列表</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover stock-table">
                        <thead>
                            <tr>
                                <th>股票代码</th>
                                <th>股票名称</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for stock in latest_stocks %}
                            <tr>
                                <td><strong>{{ stock.symbol }}</strong></td>
                                <td>{{ stock.name }}</td>
                                <td>
                                    <a href="{% url 'stock_detail' stock.symbol %}" class="btn btn-sm btn-outline-primary">
                                        查看详情
                                    </a>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="3" class="text-center">暂无股票数据</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
